<template>
  <div>
    <div class="my-animation-slide-top">
      <twoPoem></twoPoem>
    </div>

    <el-calendar v-model="mydate" class="content-container shadow-box" @input="handleDatePick(mydate)">
    </el-calendar>

    <div v-if="!showDiaryForm" class="content-container">
      <div class="add-diary-button shadow-box">
        <el-button type="primary" @click="showDiaryForm = true">
          <svg t="1736125699977" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5427"
               width="64" height="64"><path d="M813.09 238.24H200.855s-35.86 11.324-35.86 79.27 35.86 81.157 35.86 81.157H813.09s-30.833-13.212-30.833-80.214 30.833-80.213 30.833-80.213z" fill="#FCE3C3" p-id="5428"></path><path d="M836.11 411.167H198.626l-2.092-0.771c-1.798-0.662-44.039-17.096-44.039-92.887 0-76.229 42.775-90.614 44.597-91.189l1.837-0.58H836.11v25H203.434c-5.723 2.987-25.938 17.064-25.938 66.77 0 49.62 20.176 65.117 26.251 68.657H836.11v25z" fill="#300604" p-id="5429"></path><path d="M256.75 275.988h231.233v18.873H256.75zM390.334 310.933h344.649v23.043H390.334zM262.52 349.398h150.736v23.043H262.52z" fill="#ED8F27" p-id="5430"></path><path d="M907.017 433.246H294.782s-35.86 11.324-35.86 79.27 35.86 81.157 35.86 81.157h612.235s-30.833-13.212-30.833-80.214 30.833-80.213 30.833-80.213z" fill="#FCE3C3" p-id="5431"></path><path d="M930.037 606.173H292.553l-2.092-0.771c-1.798-0.662-44.039-17.096-44.039-92.887 0-76.229 42.775-90.614 44.597-91.189l1.837-0.58h637.182v25H297.36c-5.723 2.987-25.938 17.064-25.938 66.77 0 49.62 20.176 65.117 26.251 68.657h632.364v25z" fill="#300604" p-id="5432"></path><path d="M354.857 541.566h431.325v23.043H354.857z" fill="#ED8F27" p-id="5433"></path><path d="M792.055 627.604H179.82s-35.86 11.324-35.86 79.27 35.86 81.157 35.86 81.157h612.235s-30.833-13.212-30.833-80.214 30.833-80.213 30.833-80.213z" fill="#FCE3C3" p-id="5434"></path><path d="M815.075 800.531H177.59l-2.092-0.771c-1.799-0.663-44.038-17.097-44.038-92.887 0-76.229 42.774-90.614 44.595-91.189l1.838-0.58h637.183v25H182.397c-5.723 2.987-25.938 17.064-25.938 66.77 0 49.619 20.175 65.117 26.25 68.657h632.365v25z" fill="#300604" p-id="5435"></path><path d="M265.709 708.718l-50.263 147.29 153.236-57.634z" fill="#FCE3C3" p-id="5436"></path><path d="M314.22 744.184l54.462 54.19L697.02 470.635l-51.623-47.93z" fill="#B12800" p-id="5437"></path><path d="M268.266 699.017l54.461 54.19 328.339-327.739-51.623-47.93z" fill="#ED8F27" p-id="5438"></path><path d="M645.397 329.934l58.74-57.215 41.085-3.024 52.717 53.485 3.061 42-66.183 67.658z" fill="#228E9D" p-id="5439"></path><path d="M362.732 805.746l-97.023-97.028a8.645 8.645 0 0 1 0-12.226l422.24-422.237c11.268-11.271 26.55-17.075 42.624-16.073 13.979 0.871 26.973 7.542 36.878 17.445l29.748 29.746c21.576 21.574 21.578 56.555 0.002 78.131L374.957 805.746a8.644 8.644 0 0 1-12.225 0z m-77.039-103.141l83.152 83.158 415.308-415.308c14.343-14.341 14.34-37.686-0.003-52.032l-31.123-31.12c-6.948-6.951-16.187-10.778-26.013-10.778s-19.065 3.827-26.016 10.778L285.693 702.605z" fill="#300604" p-id="5440"></path><path d="M697.02 470.642l-96.201-96.201 40.744-40.745 96.201 96.201z" fill="#300604" p-id="5441"></path><path d="M697.02 483.681L587.766 374.432l53.798-53.793 109.249 109.249-53.793 53.793z m-83.151-109.249l83.152 83.152 27.695-27.695-83.152-83.152-27.695 27.695z" fill="#300604" p-id="5442"></path><path d="M745.703 381.239l-13.049-13.049 18.11-18.107c3.265-3.268 3.265-8.585-0.003-11.853l-8.768-8.771 13.049-13.049 8.771 8.771c10.459 10.465 10.459 27.485 0.003 37.951l-18.113 18.107zM638.998 419.4l13.05 13.048L327.27 757.224l-13.049-13.049z" fill="#300604" p-id="5443"></path><path d="M199.742 871.713L264 699.379l17.289 6.452-50.139 134.475 134.471-50.14 6.447 17.29z" fill="#300604" p-id="5444"></path><path d="M215.446 856.008l57.278-25.908-31.37-31.371z" fill="#300604" p-id="5445"></path><path d="M196.954 874.501l41.489-91.736 50.242 50.241-91.731 41.495z m47.311-59.812l-10.328 22.829 22.829-10.327-12.501-12.502z" fill="#300604" p-id="5446"></path></svg>
        </el-button>
      </div>
<!--      <div class="sort-section">-->
<!--        <sort></sort>-->
<!--      </div>-->
<!--      <div class="diary-section">-->
<!--        <articleList :articleList="this.articleList"></articleList> &lt;!&ndash; 传递 articleList 属性 &ndash;&gt;-->
<!--      </div>-->
      <div class="diary-section">
        <articleList v-if="articleList && articleList.length > 0" :articleList="articleList"></articleList>
        <div v-else>
          在这一天没有日记。
        </div>
      </div>
    </div>

    <div v-else class="content-container">
      <div class="back-to-articles-button shadow-box">
        <el-button type="info" @click="showDiaryForm = false">
<!--          返回文章列表-->
          <svg t="1736125485136" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1141"
               width="64" height="64"><path d="M924.525714 523.702857H96.548571c-21.006629 0-38.034286 17.027657-38.034285 38.034286v365.714286c0 21.006629 17.027657 38.034286 38.034285 38.034285h827.977143c21.006629 0 38.034286-17.027657 38.034286-38.034285V561.737143c0-21.006629-17.027657-38.034286-38.034286-38.034286zM96.548571 494.445714c-37.165349 0-67.291429 30.12608-67.291428 67.291429v365.714286c0 37.165349 30.12608 67.291429 67.291428 67.291428h827.977143c37.165349 0 67.291429-30.12608 67.291429-67.291428V561.737143c0-37.165349-30.12608-67.291429-67.291429-67.291429H96.548571z" fill="#000000" p-id="1142"></path><path d="M55.588571 580.985417C54.125714 528.091429 84.067474 520.777143 119.199451 520.777143h782.675383c35.131977 0 63.61088 8.777143 63.61088 60.208274v327.217737C965.485714 962.56 937.006811 968.411429 901.874834 968.411429H119.199451C62.902857 969.874286 55.588571 941.453897 55.588571 908.203154V580.985417z" fill="#FFFFFF" p-id="1143"></path><path d="M228.205714 744.594286c0-28.277029 22.922971-51.2 51.2-51.2s51.2 22.922971 51.2 51.2-22.922971 51.2-51.2 51.2S228.205714 772.871314 228.205714 744.594286z m231.131429 0c0-28.277029 22.922971-51.2 51.2-51.2s51.2 22.922971 51.2 51.2-22.922971 51.2-51.2 51.2-51.2-22.922971-51.2-51.2z m282.331428-51.2c-28.277029 0-51.2 22.922971-51.2 51.2s22.922971 51.2 51.2 51.2 51.2-22.922971 51.2-51.2-22.922971-51.2-51.2-51.2z" fill="#000000" p-id="1144"></path><path d="M95.340251 459.129417c40.945371 37.337966 137.131154 29.175223 218.553783 12.504503L330.605714 340.339566c0-15.629166-33.004983-83.078583-106.703725-76.586423-88.707657 7.814583-205.698194 125.042103-128.561738 195.376274z" fill="#B5D387" p-id="1145"></path><path d="M305.924389 295.56736c-17.086171-17.437257-42.876343-32.039497-78.894812-28.89728-44.529371 3.882423-97.824183 35.559131-129.688137 75.720411-15.828114 19.944594-25.526857 40.945371-26.945829 60.500846-1.375086 18.98496 4.944457 37.627611 23.341349 54.233966 18.967406 17.12128 52.545829 25.00608 94.875063 25.582446 39.1168 0.535406 83.321417-5.178514 124.94848-13.247635l17.013028-132.309577c-0.219429-1.971931-1.582811-7.381577-5.567634-15.204937-4.13696-8.118857-10.468206-17.586469-19.081508-26.37824z m39.936 15.754971c4.862537 9.546606 8.15104 19.277531 8.15104 26.322652v0.748983l-19.379932 150.71232-8.21248 1.664731c-44.763429 9.075566-94.070491 15.942217-138.125897 15.33952-43.429303-0.590994-84.579474-8.446537-110.240914-31.612343-23.636846-21.337234-32.905509-46.963566-30.997943-73.29792 1.866606-25.769691 14.324297-51.144411 31.9488-73.35936 35.04128-44.160731 93.842286-79.942217 145.993143-84.488777 44.304091-3.861943 76.665417 14.420846 97.645714 35.834149 10.418469 10.632046 18.098469 22.083291 23.218469 32.136045zM918.841051 455.943314c2.337646 5.374537 6.047451 11.641417 11.126492 16.790675 6.775954 6.869577 15.471177 11.351771 26.91072 10.082011 7.764846-0.863086 14.792411-8.548937 19.371154-26.103223 4.28032-16.401554 4.8128-36.100389 3.894126-49.216366l11.6736-0.8192-11.6736 0.8192c-0.187246-2.674103-0.57344-4.277394-0.874789-5.175588-1.983634 0.444709-5.146331 1.808091-9.470537 4.599223-4.283246 2.761874-9.028754 6.47168-13.984914 10.798811-9.903543 8.654263-19.912411 19.122469-27.691886 27.712366a562.603154 562.603154 0 0 0-9.280366 10.512091z m76.413806-71.299657c5.634926 5.459383 7.685851 13.358811 8.235886 21.214354 1.029851 14.675383 0.538331 37.106834-4.593372 56.764709-4.830354 18.505143-15.599909 40.807863-39.432777 43.455634-20.158171 2.241097-35.600091-6.199589-46.16192-16.907703-10.292663-10.438949-16.410331-23.38816-19.034697-32.41984l-1.928046-6.644297 4.745509-4.745508-0.005851 0.002925c-0.002926-0.002926 0.216503-0.248686 0.851382-0.991817l0.494446-0.579291a597.492297 597.492297 0 0 1 12.346514-14.075612c8.031086-8.864914 18.7392-20.099657 29.646263-29.625782 5.450606-4.760137 11.129417-9.254034 16.694126-12.843886 5.412571-3.487451 11.4688-6.620891 17.580617-7.881874 6.383909-1.319497 14.303817-0.784091 20.56192 5.277988z" fill="#000000" p-id="1146"></path><path d="M985.617554 411.539749c-3.203657-45.562149-70.81984 37.434514-72.794697 39.406445 3.701029 12.723931 17.767863 37.434514 44.418194 34.479543 26.650331-2.954971 30.02368-50.489051 28.376503-73.885988z" fill="#B5D387" p-id="1147"></path><path d="M475.633371 107.285943c-94.292846 38.941257-170.340937 117.438171-181.546422 234.838308-2.58048 27.062857-2.4576 58.792229 5.12 85.357715 7.366949 25.828206 21.149989 45.029669 44.883382 52.335177h591.945143c-2.849646-131.042743-30.72-293.08928-174.896274-368.575634-79.281006-41.510034-190.785829-43.06944-285.505829-3.955566z m-8.932205-21.632732c100.08576-41.331566 218.945829-40.357303 305.292434 4.850835C933.522286 175.074743 958.171429 358.288823 959.634286 491.391269l0.128731 11.831588H340.7872l-1.559406-0.438857c-35.316297-9.959131-53.736594-38.063543-62.528365-68.883017-8.736183-30.6176-8.613303-65.685211-5.909943-94.000274 12.197303-127.809829 95.398766-212.740389 195.91168-254.247498z" fill="#000000" p-id="1148"></path><path d="M291.172937 339.31264c-5.146331 53.850697 0 129.910491 58.38848 146.355931H939.154286c-1.424823-129.363383-25.635109-300.938971-176.593189-379.871817-161.271223-84.324937-448.599771-4.929829-471.38816 233.515886z" fill="#856B50" p-id="1149"></path><path d="M146.537326 357.440366a11.702857 11.702857 0 0 1 13.873737-9.025829l76.068571 16.091429a11.702857 11.702857 0 1 1-4.844983 22.89664l-76.068571-16.091429a11.702857 11.702857 0 0 1-9.028754-13.870811zM789.972114 122.640091a11.699931 11.699931 0 1 0-20.538514-11.22304l-74.029349 135.489829-150.141805-6.764251-100.57728-113.327543a11.702857 11.702857 0 0 0-17.507475 15.535543l102.508252 115.498422-95.123749 91.726995-144.969143 59.435885a11.702857 11.702857 0 1 0 8.879543 21.656138l121.563429-49.839543 53.57568 114.199405c2.74432 5.851429 9.713371 8.370469 15.5648 5.623223 5.851429-2.74432 8.370469-9.713371 5.623223-15.5648l-52.030903-110.907977 113.2544-109.211063 135.799954 5.433052L784.091429 391.165074l-63.751315 92.238995a11.699931 11.699931 0 1 0 19.254126 13.306148l65.951451-95.419246 123.871818-21.11488a11.702857 11.702857 0 1 0-3.93216-23.072182l-122.063726 20.804754-89.164069-116.69504 75.71456-138.573532z" fill="#000000" p-id="1150"></path></svg>
        </el-button>
      </div>
      <div class="diary-section">
        <diary></diary>
      </div>


    </div>

    <!-- 页脚 -->
    <div style="background: var(--favoriteBg)">
      <my-footer></my-footer>
    </div>
  </div>
</template>

<script>
import Diary from '../components/diary.vue';
import Sort from '../components/sort.vue';
import TwoPoem from '../components/common/twoPoem.vue';
import MyFooter from '../components/common/myFooter.vue';
import articleList from "@/components/articleList.vue";

export default {
  components: {
    Diary,
    // Sort,
    TwoPoem,
    MyFooter,
    articleList
  },
  data() {
    return {
      showDiaryForm: false,
      mydate: new Date(),
      selectedDate: null, // 选中的日期
      articleList: [], // 添加这个属性来存储文章列表
      userId:null
    };
  },
  created() {
    this.getCurrentUserId().then(() => {
      this.getDiariesWithFriendId();
    });
  },
  methods: {
    handleDatePick(mydate) {
      this.selectedDate = mydate;
      this.getDiariesForDate(mydate);
    },
    getDiariesForDate(mydate) {
      const formattedDate = mydate.toISOString().split('T')[0];
      const baseRequestVO = {
        current: 1,
        size: 10,
        searchKey: "",
        recommendStatus: null,
        labelId: null,
        sortId: null,
        date: formattedDate, // 添加日期属性
      };
      // this.$http.post(this.$constant.baseURL + "/article/listArticleByDate", baseRequestVO)
      this.$http.post(this.$constant.baseURL + "/article/listArticleByDateWithFriend", baseRequestVO)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            // this.diaryIds = res.data.map(article => article.id); // 提取所有文章的 ID
            // console.log("收到的文章 ID 是", this.diaryIds);
            this.articleList = res.data; // 将后端返回的数据赋值给 articleList
            console.log("收到的文章列表是", this.articleList);
          }else{
            this.articleList=null;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
    getCurrentUserId() {
      console.log("进入recordy页面函数getCurrentUserId");
      return this.$http.get(this.$constant.baseURL + "/vortex/getCurrentUser") // 返回 Promise
        .then((res) => {
          console.log("返回的数据是", res);
          if (res && res.data) {
            this.userId = res.data.id; // 设置article的userId
            console.log("recordy页面写文章的用户id是", this.userId);
          } else {
            this.$message({
              message: res.data.message || "获取用户信息失败",
              type: "error"
            });
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message || "网络请求错误",
            type: "error"
          });
        });
    },
    getDiariesWithFriendId() {
      console.log("getDiariesWithFriendId方法中的userId是", this.userId);
      if (!this.userId) {
        this.$message.error("用户ID未获取到，请稍后再试");
        return;
      }
      // 获取当前用户及其唯一好友的所有日记
      this.$http.get(`${this.$constant.baseURL}/article/listAllDiariesWithFriend?userId=${this.userId}`)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.articleList = res.data; // 将后端返回的数据赋值给 articleList
            console.log("收到的当前用户及其好友的所有日记列表是", this.articleList);
          } else {
            this.articleList = null; // 如果没有数据，则清空列表
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message || "获取日记失败",
            type: "error"
          });
        });
    }
  },

};
</script>

<style scoped>
.content-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px auto;
  width: 80%;
}

.diary-section, .sort-section {
  width: 100%;
  margin-bottom: 20px; /* Add some space between the sections */
}
</style>
